<template>
  <div>
    足球 ：
    <template v-for="n in footballNews">
      <button @click="handleDetails(n)">查看新闻</button>
      <!--   路由链接，点击是路由地址会切换到属性 to 的地方 ?id=xx&---  -->
      <router-link
        :to="{
          path: '/news/description',
          query: {
            id: n.id,
            name: n.name,
            content: n.content,
          },
        }"
        active-class="link"
        >{{ n.name }}</router-link
      >
    </template>
    <hr />
    <!-- nba ： -->
    <!--动态路由展示隐藏params写法
           路由链接，点击是路由地址会切换到属性 to 的地方 站位   -->
    <!-- <template v-for="n in nbaNews">
      <router-link
        :to="{
          name: 'description',
          params: {
            id: n.id,
            name: n.name,
            content: n.content,
          },
        }"
        active-class="link"
        >{{ n.name }}</router-link
      >
    </template> -->
    <hr />
  </div>
  <main>
    <!--   路由试图，路由切换组件的地方   -->
    <router-view />
  </main>
</template>

<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from "vue-router";
import { reactive } from "vue";
import { type NewI, type NewsI } from "@/types";
let router = useRouter();
let handleDetails = (n: NewI) => {
  router.push({
    name: "description",
    params: {
      id: n.id,
      name: n.name,
      content: n.content,
    },
  });
};
let id = 1;
let footballNews = reactive<NewsI>([
  { id: id++, name: "没戏", content: "2024.02.05, 香港，没有上场踢球" },
  { id: id++, name: "c罗", content: "2024.01.24, 深圳，没有上场踢球" },
]);
let nbaNews = reactive<NewsI>([
  { id: id++, name: "快船", content: "2024.02.07, 西部第一" },
  { id: id++, name: "凯尔特人", content: "2024.02.07, 东部第一" },
]);
</script>

<style scoped></style>
